<template>
	<view class="content">
		<Conpon v-if="isNewCoupon" @closeNewCoupon="closeNewCoupon" :couponData="couponData"></Conpon>
		<NewCards></NewCards>
		<skelton v-if="!isLoading"></skelton>


		<!-- 优惠券列表 -->
		<uni-popup class="unipopup animation-top " ref="coupon" type="center" :closeBtn="false">
			<view class="coupon-box">
				<view class="coupon-tit">
					<text>您还有优惠券未使用哦！</text>
					<text class="cuIcon-close" @click="closeUni"></text>
				</view>
				<scroll-view class="coupon-list sub-coupon-list" scroll-y="true" style="height: 50vh;"
					@scrolltolower="loadCoun">
					<view class="coupon-item " v-for="(item,index) in couponList" :key="index">
						<view class="coupon-money middle" style="width: 30%;">
							<text class="text-red ">￥{{item.money|numFilter}}</text>
							<text style="font-size: 24upx; color: #999999;"
								class="">满{{item.condition|numFilter}}可用</text>
						</view>
						<view class="coupon-body ">
							<view class="title"><text>{{item.title}}</text></view>
							<view class="info"><text>有效期至：{{item.use_end_time}}</text></view>
							<view class="info"><text v-if="item.area_id==0">全区通用</text><text
									v-else>{{item.area_name}}</text></view>
						</view>
						<view class="coupon-status middle">
							有效
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 新用户提示 -->
		<view class="basis-xll guide fade-in" v-if="guide && isGuide">
			<view class=" guide-item middle fade-in"
				:style="{top:guide.d.top-(guide.w*0.42)+'px',left:guide.d.left-(guide.w*0.22)+'px',width:guide.w*1.2+'px',height:guide.w*1.2+'px'}">
				<view class=" flex flex-wrap middle bg-white roduis-100" @click="clickGuide"
					:style="{width:guide.w*1.05+'px',height:guide.w*1.05+'px'}">
					<view class="app-icon clickEffict ">
						<image class="app-img clickEffict" :lazy-load="true" :src="domain+guide.icon" mode="aspectFit">
						</image>

					</view>
					<text class="app-name">{{guide.name}}</text>
				</view>
			</view>
			<image src="../../static/img/jiantou.png" mode="heightFix" class="guide-img fade-in"
				:style="{top:guide.d.top-guide.scw*0.4+'px',left:guide.rl+'px',height:guide.scw*0.3+'px'}"></image>
			<image src="../../static/img/meishi.png" mode="heightFix" class="guide-img"
				:class="guide.fanzhuan?'fangzhuan':''"
				:style="{top:guide.d.top-guide.scw*0.15+'px',left:guide.tl+'px',height:guide.scw*0.25+'px'}"> </image>

			<view class="guide-img zhidao middle padding" @click="clearGuide">
				我知道了
			</view>
		</view>

		<view class="head flex" :style="[{height:StatusBar.height+StatusBar.top+5+'px'}]">
			<view class="head-fixed ">
				<view class="top" :style="[{height:StatusBar.top+'px'}]">
				</view>
				<view class="bottom  flex align-center" :style="[{height:StatusBar.height+'px'}]"
					@click="clickPosition">
					<image :src="resDomain+'/static/img/location.png'" mode=""></image>

					<!-- <view class="upwarp-progress cuIcon-loading1 mescroll-rotate margin-sm" v-if="!area.area_name && !isLoading"></view>
					 -->
					<view class="addr-name flex align-center" v-if="!area.area_name && loadStatus=='disconnection'">
						<text class="text-cut">选择校区</text>
					</view>

					<view class="addr-name flex align-center" v-if="area.area_name && isLoading">
						<text class="text-cut" v-if="area.area_name"> {{area.area_name }} </text>
						<view class="cuIcon-right rigth-icon middle " v-if="area.area_name"></view>
					</view>

				</view>


			</view>

		</view>



		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="downOption" bottom='5%'
			:class="isLoading?'fade-in':''" v-show="isLoading">

			<!-- banner first广告位开始 -->
			<view class="bannerBox " v-if="banner.first.length>1">
				<swiper class="swiper " :circular="true" :autoplay="(banner.first.length>1)?true:false" interval="3000"
					duration="500" :indicator-dots="(banner.first.length>1)?true:false"
					indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#FFFFFF">
					<swiper-item v-for="(item,index) in banner.first" :key="index" @click="openUrl(item)">

						<image class="lunboImg" :src="item.thumb" mode="aspectFill"
							@error="errorImg(index,'banner','first')">
						</image>

					</swiper-item>
				</swiper>
			</view>
			<view class="bannerBox" v-if="banner.first.length==1">
				<view class="swiper" v-for="(item,index) in banner.first" :key="index" @click="openUrl(item)">
					<image class="lunboImg" :src="item.thumb" mode="aspectFill"
						@error="errorImg(index,'banner','first')">
					</image>
				</view>
			</view>
			<!-- banner广告位结束 -->

			<!--  公告通知开始 -->
			<view class="noticeBox flex justify-between" v-if="notice.length>0">
				<text class="cuIcon-notification iconlaba"></text>
				<swiper vertical="true" autoplay="true" interval="5000" duration="500" circular="true" class="notic-s">
					<swiper-item v-for="(item,index) in notice" :key="index" @click="openLink(1,item.link)">
						<text class="ellipsis" style="width: 100%;"> 公告：{{item.title || '--'}} </text>
					</swiper-item>
				</swiper>
				<text class="cuIcon-right jiantou"></text>
			</view>


			<!--  公告通知结束 -->


			<!-- 应用列表开始-->
			<view class="app-box " v-if="appList.length>0">
				<swiper :indicator-dots="false" :duration="200" @change="changePage"
					:style="{height:150*Math.ceil(appList[0].length/5)+'rpx'}">
					<swiper-item v-for="(app,ind) in appList" :key="ind">
						<view class="appBox">
							<view class="app-item middle" v-for="(item,index) in app" :id="item.code"
								@click="clickApp(index+(ind*15))" :style="[{animationDelay: (index)*0.1 + 's'}]"
								:key="index">
								<view class="app-icon clickEffict">
									<image class="app-img clickEffict" :class="item.is_open==0?'gray':''"
										:lazy-load="true" @load="setGuide(item.code,index)" :src="domain+item.icon"
										mode="aspectFit"></image>
								</view>
								<view class="app-name" :class="item.is_open==0?'text-gray':''">
									{{item.name}}
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="middle" v-if="appList.length>1">
					<text v-for="(item,index) in appList" :key="index" class="cuIcon-title"
						:class="appIndex==index?'text-blue':'text-gray'"></text>
				</view>
			</view>
			<!-- 应用列表结束 -->


			<!-- banner secend广告位开始 -->
			<view class="banner-secend" v-if="banner.secend.length>1">
				<swiper class="swiper " :indicator-dots="(banner.secend.length>1)?true:false" circular="true"
					:autoplay="(banner.secend.length>1)?true:false" interval="3000" duration="500"
					indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#FFFFFF">
					<swiper-item class="middle" v-for="(item,index) in banner.secend" :key="index"
						@click="openUrl(item)">

						<image class="" :src="item.thumb" mode="widthFix" @error="errorImg(index,'banner','secend')">
						</image>

					</swiper-item>
				</swiper>
			</view>

			<view class="banner-secend" v-if="banner.secend.length==1">
				<view class="swiper middle" v-for="(item,index) in banner.secend" :key="index" @click="openUrl(item)">
					<image class="" :src="item.thumb" mode="widthFix" @error="errorImg(index,'banner','secend')">
					</image>
				</view>
			</view>
			<!-- banner secend广告位结束 -->

			<!--消息通知开始-->
			<view class="notice-list flex justify-between flex-wrap " v-if="noticeList.length>0">
				<view class="notice-l-box flex justify-between" v-for="(item,ind) in noticeList"
					@click="jumpNotice(ind)" :key="ind">

					<view class="notice-text-l">
						<text class="cuIcon-title text-black"></text>{{item.desc}}
					</view>
					<view class="notice-time">
						{{item.created_at}}
					</view>
				</view>
			</view>
			<!--消息通知结束-->


			<!-- 校园新闻开始 -->
			<view class="schoolbox fade-in" v-if="FocusNews.length>0">
				<view class="school-head">
					<text class="tabhover">校园要闻</text>
					<text class="school-head-right notice-time middle" @click="toNewsList">最新资讯</text>
				</view>
				<view class="school-box">
					<view class="school-item" v-for="(school,index) in FocusNews" :key="index" @click="toNews(school)">
						<image :src="school.img" @error="errorImg(index,'FocusNews')" mode="aspectFill"></image>
						<view class="school-title">{{school.title || ""}}</view>
						<view class="school-tag">
							<text class="tagblue" v-for="(tag,i) in school.tags" v-if="i<2">{{tag}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 校园新闻结束 -->






			<!-- 商品展示 -->
			<view class="shop-box" v-if="goodsList.length>0">
				<view class="shop-bar1 " :class="{'nav-fixed2':is_fixed==1,'fade-in-shop':is_fixed==1}"
					:style="{'top':is_fixed==1?(StatusBar.height+StatusBar.top)+'px':'0px'}">
					<scroll-view :scroll-x="true" class="shop-bar1">
						<view :class="{'shopbar2':is_fixed==1}" class="shop-bar1-view ">
							<view class="good-nav-item flex   align-center"
								:class="sort_type==0?'tabhover':'tabnohover'" @click="changeTab(0)">
								<text>推荐商品</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="goodsContent">
					<view class="goodsLeftList" id="left">
						<view class="goodsItem" v-for="(item,index) in goodsList" :key="index" v-if="item.p_type==0"
							:id="'id'+index" @click="shopinfo(item)"
							:class="[item.p_show?'fade-in':'hide',item.p_load?'':'fixed1']">
							<image :src="item.image" class="good-banner" @error="errorImg(index,'goodsList')"
								mode="widthFix" @load="seccess(index,'goods')">
							</image>
							<view class="goodsName clamp-2">
								{{item.goods_name}}
							</view>
							<view class="goodsDesc clamp-2" v-if="item.intro.length>0">
								{{item.intro}}
							</view>
							<view class="goodsPrice">
								<view class="text-price good-price ">{{item.price}}</view>
							</view>
							<view class="goodLogo ">
								<view class="logobox middle" :style="[{backgroundImage:'url(' + item.logo + ')'}]">
								</view>
								<text class="shopname ">{{item.shop_name}}</text>
							</view>
						</view>
					</view>

					<view class="goodsRightList" id="right">
						<view class="goodsItem" v-for="(item,index) in goodsList" :key="index" v-if="item.p_type==1"
							:id="'id'+index" @click="shopinfo(item)"
							:class="[item.p_show?'fade-in':'hide',item.p_load?'':'fixed1']">
							<image :src="item.image" class="good-banner" mode="widthFix" @load="seccess(index,'goods')"
								@error="errorImg(index,'goodsList')">
							</image>
							<view class="goodsName clamp-2">
								{{item.goods_name}}
							</view>
							<view class="goodsDesc clamp-2" v-if="item.intro.length>0">
								{{item.intro}}
							</view>
							<view class="goodsPrice">
								<view class="text-price good-price ">{{item.price || ""}}</view>
							</view>
							<view class="goodLogo ">
								<view class="logobox middle" :style="[{backgroundImage:'url(' + item.logo + ')'}]">
								</view>
								<text class="shopname ">{{item.shop_name || ""}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>


		</mescroll-body>





	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import skelton from "@/components/skeleton/basic.vue"
	import Conpon from "@/components/coupon.vue"
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	let share = {
		open: -1,
		param: null
	};
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody,
			Conpon,
			skelton
		},
		data() {
			return {
				isLoading: false,
				loadStatus: 'load',
				resDomain: this.resDomain,
				domain: this.apiHost,
				StatusBar: {
					height: 45,
					top: 0
				},
				area: [],
				param: 0,
				appList: [],
				banner: {
					first: [],
					secend: []
				},
				notice: [],
				noticeList: [],
				FocusNews: [],
				is_fixed: 0,
				sort_type: 0,
				goodsList: [],
				total: 0,
				dataNum: {
					errorNum: 0,
					preNum: 0,
					isShow: false,
				},
				LeftListHeight: 0,
				RightListHeight: 0,
				guide: null,
				isGuide: false,
				appIndex: 0,
				couponList: [],
				couponData: [],
				isNewCoupon: false,
				downOption: {
					auto: false,
					use: false
				}
			}
		},

		onLoad(option) {
			if (option.is_share == 1) {
				share.open = false;
				share.param = option;
			}
			(option.param) ? (() => {
				this.param = JSON.parse(option.param);
				this.changeApp();
			})() : "";
			this.$store.state.isResh = false;
			uni.onNetworkStatusChange((res) => {
				if (!this.isLoading) {
					this.loadData();
				}
			})

		},
		computed: {
			...mapState(['isResh'])
		},
		filters: {
			numFilter(value) {
				return parseFloat(value)
			}
		},
		onPullDownRefresh() {
			this.$store.state.isResh = false;
			this.loadData();
		},
		onPageScroll(e) {
			this.clearGuide();
			(e.scrollTop > 550) ? (() => {
				this.is_fixed = 1;
			})() : (e.scrollTop <= 550) ? (() => {
				this.is_fixed = 0;
			})() : "";
		},
		onShareTimeline() {
			return {
				title: "一舟云校园",
				path: '/pages/basic/basic'
			}
		},
		onShow() {
			this.loadData();
		},
		onShareAppMessage(res) {
			return {
				title: "一舟云校园",
				path: '/pages/basic/basic'
			}
		},
		methods: {
			//分享
			openshare() {
				if (share.param.is_share == 1 && share.open == false) {
					this.statusState.is_share = share.param.is_share;
					this.statusState.user_id = share.param.user_id;
					this.statusState.area_id = share.param.area_id;
					uni.setStorage({
						key: "area_id",
						data: share.param.area_id,
						success: (r) => {
							uni.navigateTo({
								url: "/pages/user/shareInfo",
								success: () => {
									share.open = true;
								}
							})
						},
						fail: () => {
							share.open = true;
							this.loadData();
						}
					})
					return;
				}
			},

			/***********************************加载数据**************************************************/
			//获取消息 公告 新闻  广告等
			loadData() {
				//#ifdef MP-WEIXIN
				this.getInfo().then((e) => {
					this.StatusBar = e.custom;
				});
				//#endif

				let load = (area_id) => {

					//广告
					this.apiRequest('/buyer/getAd', {
						area_id: area_id,
						platform: 0,
						position_type: 'all'
					}, 0).then(res => {
						let success = () => {
								this.banner = {
									first: [],
									secend: []
								}
								for (let i in res.data) {
									switch (res.data[i].position_type) {
										case 0:
											this.banner.first.push(res.data[i]);
											break;
										case 1:
											this.banner.secend.push(res.data[i]);
											break;
									}

								}
							}
							(res.code == 200) ? success() : "";

					});

					//公告
					this.apiRequest('/buyer/getNotice', {
						area_id: area_id,
						platform: 0
					}, 0).then(res => {
						let success = () => {
								this.notice = res.data
							}
							(res.code == 200) ? success() : "";
					})
					//应用
					this.apiRequest('/buyer/areaInfo', {
						area_id: area_id
					}, 0).then(res => {
						uni.hideLoading();
						this.isLoading = true;
						uni.stopPullDownRefresh();
						if (res.code == 200) {
							let b = -1,
								c = 15,
								k = 0,
								arr = [];
							for (let i in res.data.menu) {
								if (res.data.menu[i].icon) {
									k++;
									(k <= c * (b + 1) && k >= c * b) ? (() => {
										arr[b].push(res.data.menu[i]);
									})() : (() => {
										b++;
										arr[b] = [];
										arr[b].push(res.data.menu[i]);
									})();
								}
							}
							this.appList = arr; //获取应用模块
							this.area = res.data; //位置信息
							uni.setStorageSync("menu", this.area.menu);
							this.statusState.is_share = res.data.is_share;

						} else {
							this.$store.state.isResh = true;
							//this.isResh = false;
							uni.showModal({
								title: "温馨提示",
								content: res.msg,
								showCancel: false,
								success: (e) => {
									if (e.confirm) {
										uni.navigateTo({
											url: '/pages/basic/position'
										})
									}
								}
							})
						}

					}, e => {
						uni.hideLoading();
						if (this.isLoading) {
							uni.showModal({
								content: "网络出错啦，请稍后再试",
								showCancel: false,
								success: () => {
									uni.stopPullDownRefresh();
								}
							})
						}
						this.loadStatus = "disconnection";
					});
					//新闻

					!this.isResh ? (() => {

						this.FocusNews = [];
						this.apiRequest('/buyer/NewsList', {
							area_id: area_id,
							limit: 4,
						}, 0, 'GET').then(res => {
							if (res.code == 200) {
								this.FocusNews = res.data;
							}
						});

						this.goodsList = [];
						this.LeftListHeight = 0;
						this.RightListHeight = 0;
						this.dataNum.preNum = 0;
						this.total = 0;
						this.mescroll.resetUpScroll();
						this.$store.state.isResh = true;
					})() : "";
					this.getCouponData();
					let authorization = uni.getStorageSync('authorization');
					if (!authorization) {
						this.noticeList = [];
						return false;
					}
					//消息
					this.apiRequest('/buyer/NotifyList', {
						is_new: 1
					}, 0, 'GET').then(res => {
						this.noticeList = [];
						if (res.code == 200) {
							for (let i in res.data.data) {
								if (i < 3) {
									this.noticeList.push(res.data.data[i]);
								}
							}
						} else if (res.data.code == 401) {
							this.isResh = false;
						}
					});

				}
				uni.getStorage({
					key: "area_id",
					success: (r) => {
						if (share.open == false && share.param.area_id) {
							this.openshare();
						} else {
							load(r.data);
						}
					},
					fail: (e) => {
						if (share.open == false && share.param.area_id) {
							this.openshare();
						} else {
							this.$store.state.isResh = false;
							//this.isResh = false;
							uni.navigateTo({
								url: '/pages/basic/position'
							})
						}

					}
				})

			},
			//加载优惠券
			loadCoun() {
				this.apiRequest('/buyer/couponList', {
					area_id: uni.getStorageSync('area_id'),
					status: 0,
					type: 2,
					page: this.page,
					limit: 10,
				}, 0).then(res => {
					if (res.code == 200) {
						(this.couponList.length < res.data.total) ? (() => {
							this.couponList = this.couponList.concat(res.data.data) //追加新数据
							this.page++;
						})() : "";

					}
				})
			},
			getCouponData() {
				let getCoupon = () => {
					//优惠券列表
					let couponList = () => {
						this.apiRequest('/buyer/couponList', {
							area_id: uni.getStorageSync('area_id'),
							status: 0,
							type: 2,
						}, 0).then(res => {
							if (res.code == 200) {
								let conlist = "";
								let meth = () => {
									let couponlist_id = [];
									for (let i in res.data.data) {
										let getId = res.data.data[i].id,
											isSet = false;
										for (let k in conlist) {
											if (conlist[k].id == getId) {
												isSet = true;
												break;
											}
										}
										if (!isSet) {
											couponlist_id.push(res.data.data[i]);
										}
									}

									if (couponlist_id.length > 0) {
										uni.setStorageSync("counlist", res.data.data);
										this.couponList = couponlist_id;
										uni.hideTabBar();
										this.$refs.coupon.open();

									}
									if (res.data.data.length == 0) {
										this.isGuide = true;
										uni.removeStorageSync("counlist");
									}

								}

								uni.getStorage({
									key: "counlist",
									success: (res) => {
										conlist = res.data;
										meth();
									},
									fail: () => {
										meth();
									}
								})


							} else {
								this.isGuide = true;
							}
						}).catch(e => {
							this.isGuide = true;
						});
					}
					//新用户优惠券
					this.apiRequest('/buyer/GetCoupon', {
						area_id: uni.getStorageSync('area_id'),
					}, 0, 'GET').then(res => {
						let isset = res.data.coupon_activity.hasOwnProperty("bindcoupon");
						if (res.code == 200 && isset) {
							this.couponData = res.data;
							this.isNewCoupon = true;
						} else {
							couponList();
						}

					}).catch(e => {
						couponList();
					});
				}
				this.checkLogin((r) => {
					if (r) {
						getCoupon();
					} else {
						this.isGuide = true;
					}
				})
			},
			//设置引导
			setGuide(type, index) {

				uni.getStorage({
					key: 'is_new',
					success() {
						uni.showTabBar({});
					},
					fail: () => {
						if (type == "TakeOut") {
							const query = uni.createSelectorQuery().in(this);
							query.select('#TakeOut').boundingClientRect(data => {
								this.getInfo().then((e) => {
									let dat = {
										d: data,
										w: data.width > data.height ? data.width : data
											.height,
										icon: this.area.menu[index].icon,
										name: this.area.menu[index].name,
										tl: 0,
										rl: 0,
										index: index,
										scw: e.screenWidth,
										fanzhuan: false
									}
									if (dat.scw / 2 > dat.d.left) {
										dat.tl = dat.d.left + dat.w;
										dat.rl = dat.tl;
										dat.fanzhuan = false;
									} else {
										dat.tl = dat.d.left - dat.scw * 0.3 - 10;
										dat.rl = dat.tl - (dat.scw * 0.3) / 2;
										dat.fanzhuan = true;
									}
									this.guide = dat;
								});
							}).exec();
						}

					}
				})
			},

			downCallback() {
				this.loadData();
			},
			/*上拉加载的回调 */
			upCallback(page) {
				let request = () => {
					this.apiRequest('/buyer/recommend', {
						area_id: uni.getStorageSync('area_id'),
						type: this.sort_type,
						page: page.num,
						limit: page.size,
					}, 0).then(res => {
						let error = () => {
							this.mescroll.endErr();
						}
						let success = () => {
								if (page.num == 1) this.goodsList = [];
								let dat = res.data.data,
									arr = [];
								for (let i in dat) {
									dat[i].p_height = 0;
									dat[i].p_load = false;
									dat[i].p_show = false;
									if (i % 2 == 0) {
										dat[i].p_type = 0;
									} else {
										dat[i].p_type = 1;
									}
									arr.push(dat[i]);
								}
								if (dat.length == 0) {
									setTimeout(() => {
										this.mescroll.endErr();
									}, 1500);
								}
								this.dataNum.preNum = dat.length;
								this.goodsList = this.goodsList.concat(arr); //追加新数据
							}
							(res.code == 200) ? success() : error();
					}, e => {
						this.mescroll.endErr();
					}).catch(() => {
						this.mescroll.endErr();
					})
				}
				request();
			},
			/***********************************处理方法**************************************************/

			//处理加载成功的图
			seccess(index, type) {
				let good = () => {
					(!this.goodsList[index].p_load) ? (() => {
						this.addUp(index);
					})() : "";
				}
				switch (type) {
					case "goods":
						good();
						break;
					case "banner":
						this.banner[index].isshow = true;
						break;
					case "FocusNews":
						this.FocusNews[index].isshow = true;
						break;
				}
			},
			//处理加载错误的图
			errorImg(...dat) { //图片加载失败给出默认图
				switch (dat[1]) {
					case "banner":
						this.banner[dat[2]][dat[0]].thumb = this.resDomain + "/static/img/home.png";
						break;
					case 'goodsList':
						this.$nextTick(() => {
							this.goodsList[dat[0]].p_type = -1; //不显示
							this.addUp(dat[0]);
							this.dataNum.errorNum++;
						});
						break;
					case 'FocusNews':
						this.FocusNews[dat[0]].isshow = true;
						this.FocusNews[dat[0]].img = this.resDomain + "/static/img/error.png";
						break;
				}
			},
			//累计计数方法
			addUp(index) {
				this.total++;
				(this.goodsList.length == this.total) ? (() => {
					this.mescroll.endSuccess(this.goodsList.length);
					this.doLoad();
					let current = parseInt(this.goodsList.length - this.dataNum.preNum);
					for (let i = current; i < this.goodsList.length; i++) {
						this.goodsList[i].p_load = true;
						this.showImge(i);
					}
				})() : "";
			},
			//处理加载失败的商品 进行继续加载 每一次加载出现超过 4个未加载的进行继续加载
			doLoad() {
				if (this.dataNum.errorNum >= 6) {
					this.dataNum.errorNum = 0;
					this.mescroll.triggerUpScroll();
				}
			},
			//瀑布式布局
			showImge(index) {
				let rest = () => {
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('#id' + index).boundingClientRect(data => {
							let val = (this.LeftListHeight - this.RightListHeight);
							let create = () => {
								if (this.goodsList[index].p_type == 0) {
									this.LeftListHeight += data.height;
								} else if (this.goodsList[index].p_type == 1) {
									this.RightListHeight += data.height;
								}
								this.goodsList[index].p_show = true;
								this.dataNum.isShow = false;
							}
							let doLeft = () => {
								this.goodsList[index].p_type = 0;
								create();
							}
							let doRight = () => {
								this.goodsList[index].p_type = 1;
								create();
							};
							(val <= 0) ? doLeft(): doRight();
						}).exec();
					}, 300);
				};
				(this.goodsList[index].p_type != -1) ? rest(): "";

			},

			/***********************************事件触发**************************************************/

			//直播
			playLive() {
				(this.area.is_live && this.area.is_live == 1) ? (() => {
					// uni.removeStorageSync("live_url");
					//    uni.setStorageSync("live_url",this.area.live_link);
					uni.navigateTo({
						url: "/app/cloudClassroom/playLive?url=" + this.area.live_link
					})

				})() : "";
			},

			//清空引导
			clearGuide() {
				this.guide = null;
				uni.showTabBar();
				uni.setStorageSync("is_new", 1);
			},
			//改变位置
			clickPosition() {

				uni.navigateTo({
					url: '/pages/basic/position?type=basic',
					animationType: "none",
					success: () => {
						// this.isLoading = false;
					}
				});
			},
			//滑动应用列表
			changePage(e) {
				this.appIndex = e.detail.current;
			},
			//商品详情
			shopinfo(item) {
				let shop_id = item.shop_id,
					shopType = item.shopType,
					goods_id = item.goods_id;
				this.$store.state.isResh = true;
				//this.isResh = true;
				switch (shopType) {
					case 0:
						uni.navigateTo({
							url: '/app/TakeOut/pages/index/shopInfo?shop_id=' + shop_id + "&goods_id=" + goods_id
						});
						break;
					case 1:
						uni.navigateTo({
							url: '/app/Deliver/pages/index?shop_id=' + shop_id
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/app/BotWater/pages/index?shop_id=' + shop_id
						});
						break;

				}

			},
			//检查登录
			checkLogin(callback) {
				let authorization = uni.getStorageSync('authorization');
				if (!authorization) {
					callback(false);
				} else {
					callback(true);
				}

			},
			//新闻列表
			toNewsList() {
				this.$store.state.isResh = true;
				//this.isResh = true;
				uni.navigateTo({
					url: "/pages/basic/newLists"
				})

			},
			//新闻详情跳转
			toNews(item) {
				//this.isResh = true;
				this.$store.state.isResh = true;
				uni.navigateTo({
					url: "/pages/basic/schoolNews?id=" + item.id
				})
			},
			//点击小应用模块
			clickApp(index) {
				let type = this.area.menu[index].type;
				let typeName = this.area.menu[index].code;
				if (this.area.menu[index].is_open == 0) {
					uni.showToast({
						title: "暂未开放",
						icon: "none"
					})
					return false;
				}

				if (typeName == "TakeOut") {
					//this.isResh = true;
					this.$store.state.isResh = true;
					let param = this.area.menu[index].params;
					uni.navigateTo({
						url: this.area.menu[index].url + "?params=" + JSON.stringify(param),
						success: () => {
							uni.hideLoading();
						}
					});
				} else {
					switch (type) {
						case "0": //
							this.$store.state.isResh = true;
							//this.isResh = true;
							let param = this.area.menu[index].params;
							uni.navigateTo({
								url: this.area.menu[index].url + "?params=" + JSON
									.stringify(
										param),
							});
							break;
						case "1":
							this.$store.state.isResh = true;
							//this.isResh = true;
							let link = this.area.menu[index].url;
							uni.setStorageSync("weburl", link);
							uni.navigateTo({
								url: "/components/webOpen"
							})
							break;

						case "2": //跳转小程序
							let input = this.area.menu[index].input;
							let url = this.area.menu[index].url;
							console.log(input.appid);
							uni.navigateToMiniProgram({
								appId: input.appid,
								path: url,
								shortLink: "",
								success: (r) => {

								},
								fail: (e) => {
									console.log(e)
								}
							})
							break;
					}

				}
			},
			//打开分享链接
			changeApp() {

				uni.showToast({
					title: "xxx",
					icon: "none"
				})

				if (this.param != 0) {
					let path = this.param.params;
					if (this.param.key != "") {
						path = this.param.params + "?" + this.param.key + "=" + this.param.id;
					}
					uni.navigateTo({
						url: path,
						animationType: "slide-in-left"
					})
				}
			},
			//打开内部外部链接
			openLink(type = 0, link) {
				if (type == 0) {
					uni.navigateTo({
						url: link,
					});
				}
				if (type == 1) {
					uni.setStorageSync("weburl", link);
					uni.navigateTo({
						url: "/components/webOpen"
					})

				}

			},
			//打开广告
			openUrl(item) {
				switch (item.open_type) {
					case 0:
						uni.navigateTo({
							url: item.ad_link
						})
						break;

					case 1:
						let path = item.ad_link + "&user_id=" + this.user_id;
						uni.setStorageSync("weburl", path);
						uni.navigateTo({
							url: "/components/webOpen"
						})
						break;
				}
			},

			//关闭弹窗
			closeUni() {
				uni.showTabBar();
				this.isGuide = true;
				this.$refs.coupon.close();
			},
			//关闭优惠券提示
			closeNewCoupon() {
				// uni.showTabBar();
				this.isNewCoupon = false;
				this.isGuide = true;
			},
			//消息跳转
			jumpNotice(index) {

				uni.navigateTo({
					url: this.noticeList[index].page
				});
				this.apiRequest('/buyer/NotifyRead', {
					notify_id: this.noticeList[index].notify_id,
				}, 0, 'POST').then(res => {
					if (res.code == 200) {
						this.$emit('refreshNotice');
					}
				})

			},



		}


	}
</script>
<style scoped>
	.fixed1 {
		position: fixed;
		top: 0;
	}

	.gray {
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: grayscale(100%);
		filter: gray;
		opacity: 0.5;
	}

	.hide {
		opacity: 0;
		z-index: -11;

	}

	.nav-fixed2 {
		position: fixed;
		width: 100%;
		left: 0;
		z-index: 99;
		background-color: #FFFFFF;
	}

	/*旋转进度条 */
	.upwarp-progress {
		display: inline-block;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		border: 2rpx solid gray;
		color: #000000;
		margin-right: 15rpx;
		border-bottom-color: transparent !important;

		vertical-align: middle;
	}

	.mescroll-rotate {
		animation: mescrollUpRotate 0.6s linear infinite;
	}

	@keyframes mescrollUpRotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
<style lang="scss">
	.content {
		$w: calc(100vw*(702/750));
		$left: calc(100vw*(24/750));

		.live-play {
			width: calc(100vw*(200/750));
			height: calc(100vw*(200/750));
			z-index: 99;
			position: fixed;
			right: calc(100vw*(24/750));
			bottom: calc(100vw*(200/750));
		}

		//新用户提示
		.guide {
			background-color: rgba(0, 0, 0, 0.5);
			width: 100vw;
			height: 100vh;
			position: fixed;
			z-index: 9999;
			top: 0;

			.guide-item {
				position: absolute;
				background-image: url(../../static/img/circle.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.roduis-100 {
				border-radius: 50%;
			}

			.guide-img {
				position: absolute;
			}

			.fangzhuan {
				transform: rotateY(180deg);
				-ms-transform: rotateY(180deg);
				-moz-transform: rotateY(180deg);
				-webkit-transform: rotateY(180deg);
				-o-transform: rotateY(180deg);
			}

			.zhidao {
				bottom: 10vh;
				width: 40vw;
				margin-left: 30vw;
				border: 5rpx solid white;
				border-radius: 20rpx;
				color: white;
				background-color: rgba(255, 255, 255, 0.1);
			}

		}


		.head {
			width: 100vw;

			.head-fixed {
				width: inherit;
				height: inherit;
				position: fixed;
				z-index: 99;
				background-color: #F7F7F7;

				.bottom {
					padding: 0 24rpx;

					image {
						width: calc(100vw*(30/750));
						height: calc(100vw*(36/750));
						margin-right: 19rpx;
					}

					.addr-name {
						height: inherit;
						max-width: 60vw;
						font-size: 32rpx;
						font-weight: 800;
						color: #333333;
						line-height: 62rpx;
						padding-right: 30rpx;

						.cuIcon-right {
							margin-left: 13rpx;
							font-size: 28rpx;
						}

					}
				}
			}
		}

		//banner样式
		.bannerBox {
			margin-top: 10upx;
			height: calc(100vw*(200/750));

			.swiper {
				width: 100%;
				height: 100%;

				swiper-item {
					width: inherit;
					height: inherit;
				}

				image {
					width: $w;
					margin-left: $left;
					height: inherit;
				}
			}

		}

		.banner-secend {
			margin-top: 10upx;
			width: 100vw;
			height: calc(100vw*(180/750));

			.swiper {
				width: 100%;
				height: 100%;

				swiper-item {
					width: inherit;
					height: inherit;
				}

				image {
					width: $w;
					height: inherit;
				}
			}


		}

		//notice
		.noticeBox {

			width: $w;
			margin-left: $left;
			margin-top: 20rpx;
			height: calc(100vw*(80/750));
			line-height: calc(100vw*(80/750));
			background-color: #FFFFFF;
			box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.05);
			border-radius: 20upx;
			display: flex;
			flex-direction: row;
			padding: 0 30rpx;

			.iconlaba {
				font-size: 45rpx;
				color: #DBDBDB;
			}

			.notic-s {
				margin-left: 28rpx;
				width: calc(100vw*(570/750));
				height: inherit;
				font-size: 24rpx;

				font-weight: 500;
				color: #333333;
			}

		}


		//app list
		.app-box,
		.guide-item {

			width: $w;
			margin-left: $left;
			margin-top: 40rpx;

			.appBox {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				height: 100%;
				align-items: flex-start;
			}

			.app-item {
				display: flex;
				width: 20%;
				flex-direction: column;
			}

			.app-icon {
				margin-top: 10rpx;
				width: calc(100vw*(89/750));
				height: calc(100vw*(89/750));
			}

			.app-img {
				width: 100%;
				height: 100%;
			}

			.app-name {
				width: 100%;
				text-align: center;
				font-size: calc(100vw*(24/750));
				font-weight: 500;

				line-height: 30rpx;
				margin-top: 10rpx;
			}



		}

		//noticeList
		.notice-list {
			width: $w;
			margin-left: $left;
			margin-top: 20rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
			border-radius: 20upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			position: relative;
			padding: 20rpx 10rpx;

			.notice-l-box {
				width: 94%;
				height: 50upx;
				display: flex;
				align-items: center;
				margin-left: 3%;

			}

			.notice-text-l {
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 78%;
				font-size: calc(100vw*(24/750));
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				overflow: hidden;

			}

			.notice-time {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				margin-left: 3%;
				white-space: nowrap;
			}

			.notice-box-right {
				position: absolute;
				float: right;
				right: 3%;
				color: #999999;
			}
		}

		//news
		.schoolbox {
			background: #FFFFFF;
			box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
			border-radius: 20upx;
			width: $w;
			margin-left: $left;
			margin-top: 40rpx;

			.school-head {
				width: 94%;
				margin: auto;
				padding: 25upx 0 25upx 0;
				position: relative;
				display: flex;
				align-items: center;

				.tabhover {
					font-size: 32upx;
					font-weight: 800;
					color: #333333;
				}
			}

			.goodsItem image {
				height: auto;
				width: 100%;
			}

			.school-box {
				width: 94%;
				margin: auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.school-head-right {
				position: absolute;
				float: right;
				right: 0;
				height: 100%;
			}

			.school-item {
				width: 48%;
				min-height: 250upx;
				margin-bottom: 40upx;

			}

			.school-item image {
				width: 100%;
				height: calc(100vw*(200/750));
				border-radius: 20upx;
			}

			.school-title {
				width: 100%;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				line-height: 1.2;
				font-size: 24upx;
				font-weight: 800;
				margin: 20upx 0 20upx 0;
			}

			.school-tag {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
			}

			.school-tag text {
				font-size: 20upx;
				font-weight: bold;
				border-radius: 4upx;
				padding: 10upx 15upx 10upx 15upx;
				margin: 10upx 20upx 0 0upx;
			}

			.tagblue {
				max-width: 80upx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				color: #3783D0;
				background-color: #E2F0FF;
			}

		}

		//goods
		.shop-box {

			margin-top: 20rpx;



			.shop-bar1 {
				width: 100%;
				height: calc(100vw*(100/750));
				z-index: 999;
				background-color: #F7F7F7;
				white-space: nowrap;
				align-items: center;
				display: -webkit-box;
				flex-direction: row;
				-webkit-box-align: center;
				align-items: center;
				line-height: calc(100vw*(100/750));

				.shop-bar1-view {
					height: 100%;

					.good-nav-item {
						margin-left: $left;
						width: 20%;
						height: 100%;
					}

					.tabnohover {
						font-size: 28upx;
						font-weight: 500;
						color: #999999;
						padding-top: 10upx;
					}

					.tabhover {
						font-size: 32upx;
						font-weight: 800;
						color: #333333;
					}

				}

			}

			.goodsContent {
				width: $w;
				background: #f7f7f7;
				display: flex;
				justify-content: space-between;
				margin-left: $left;

				.goodsLeftList {
					width: 48%;
				}

				.goodsRightList {
					width: 48%;
				}

				.goodsItem {
					background: #FFFFFF;
					width: 100%;
					margin-bottom: 30rpx;
					margin-top: 10upx;
					border-radius: 20upx;
					padding-bottom: 20upx;

					.good-banner {
						width: 100%;
						min-height: 250upx;
						max-height: 450upx;
						border-radius: 20upx 20upx 0px 0px;
					}

					.clamp-2 {
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.goodsName {
						font-size: 24rpx;
						margin: 20rpx;
						font-weight: 800;
						color: #333333;
						line-height: 1.4;

					}

					.goodsPrice {
						font-size: 40rpx;
						font-weight: bold;
						color: #3783D0;
						margin: 0rpx 20rpx 20rpx 20rpx;

					}

					.goodsPrice image {
						width: 20rpx;
						height: 20rpx;
						padding: 0 5rpx;
					}

					.goodsDesc {
						margin: 0 20rpx 20rpx 20rpx;
						font-size: 18rpx;
						font-weight: 500;
						color: #999999;
						line-height: 1.4;

					}

					.goodLogo {
						width: 90%;
						margin-left: 10upx;
						height: 50upx;
						display: flex;
						align-items: center;
						flex-direction: row;
						margin-bottom: 10upx;
						background: #F7F7F7;
						border-radius: 20upx;
					}

					.shopname {
						width: 80%;
						font-size: 24upx;
						font-weight: 500;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: block;
						margin-left: 5upx;
					}

					.logobox {

						width: 35upx;
						height: 35upx;
						background-color: #FFAFA8A2;
						background-size: cover;
						background-position: center;
						background-repeat: no-repeat;
						border-radius: 50%;
						margin-left: 10upx;

					}

				}
			}
		}

		//counpon
		.coupon-box {
			width: 80vw;
			border-radius: 16rpx;
			background: #EEEEEE;


			.coupon-tit {
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				padding: 20rpx 0;
				background: #F7F7F7;
				margin-bottom: 10rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 16rpx;
			}

			.cuIcon-close {
				position: absolute;
				float: right;
				right: 2%;
				top: 1;
				font-size: 45upx;
				z-index: 99;
			}

			.coupon-tpis {
				text-align: center;
				width: 100%;
				padding-top: 20rpx;
			}

			.coupon-list {
				padding: 30rpx 30rpx 30rpx 30rpx;
			}

			.coupon-list .norecord {
				text-align: center;
				padding: 25rpx;
			}

			.coupon-item {
				display: flex;
				justify-content: flex-start;
				font-size: 24rpx;
				border-radius: 20rpx;
				padding: 15rpx;
				margin-bottom: 25rpx;
				height: 150rpx;
				background-color: #FFFFFF;
			}

			.coupon-item .coupon-money {
				font-size: 35upx;
				font-weight: bold;
				border-right: #EEEEEE solid 1px;
				/* 	line-height: 150rpx; */
				width: 20%;
				text-align: center;
				display: flex;
				flex-direction: column;

			}

			.coupon-item .coupon-body {
				padding: 0 15rpx;
				width: 55%;
			}

			.coupon-body {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
			}

			.coupon-body .title {
				white-space: nowrap;
			}

			.coupon-item .coupon-body .info {
				font-size: 20rpx;
				color: #666666;
				line-height: 1.6;
			}

			.coupon-status {

				width: 15%;
				font-size: 24rpx;
			}

			.coupon-item .coupon-status {
				line-height: 160rpx;
			}

			.coupon-item .coupon-status text.nouse {
				background: #1270e0;
				color: #FFFFFF;
			}

			.coupon-item .coupon-status text {
				border-radius: 25upx;
			}

			.coupon-item .coupon-status text.used {
				background: #EEEEEE;
			}

			.coupon-item .coupon-status text.lasted {
				background: #EEEEEE;
			}


		}


	}
</style>
